<template>
    <div>
        <a-card>
            <div class="icon_box" v-if="settingStaus">
                <a-icon type="setting" :twoToneColor="iconColor" @click="changeTitle"
                    style="font-size: 18px;margin-right: 5px;" />
            </div>
            <a-table v-if="tableData.length > 0" :rowKey="rowKey" :columns="columnsList" :data-source="tableData"
                :childrenColumnName="childrenColumnName" :defaultExpandAllRows="defaultExpandAllRows"
                :bordered="bordered" :row-selection="rowSelection" :pagination="false" @change="pageChange"
                :key="indexKey">
                <template v-for="item in columns" :slot="item.dataIndex" slot-scope="text,record">
                    <!-- 插槽内容 -->
                    <slot :scope="record" :name="item.dataIndex"></slot>
                </template>
            </a-table>
            <div class="page_sty">
                <a-pagination :show-size-changer="showSizeChanger" :total="total" @showSizeChange="onShowSizeChange"
                    @change="sizeChange" :pageSizeOptions="pageSizeOptions" />
            </div>


        </a-card>
        <a-modal title="修改表头" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
            @cancel="handleCancel">
            <p v-for="(item, index) in titleList" :key="index">
                <a-checkbox @change="(e) => onChange(e, item)" :checked="item.status">
                    <a-input placeholder="Basic usage" v-model="item.title" />
                </a-checkbox>
            </p>
        </a-modal>
    </div>

</template>
<script>

export default {
    name: "DynamicTable",
    props: {
        // 管理图标颜色
        iconColor: {
            type: String,
            default: ''
        },
        // 是否展开
        defaultExpandAllRows: {
            type: Boolean,
            default: true
        },
        //是否有边框
        bordered: {
            type: Boolean,
            default: true
        },
        //key值
        rowKey: {
            type: String,
            default: 'id'
        },
        // 表头
        columns: {
            type: Array,
            default() {
                return [];
            },
            required: true,
        },
        // 数据
        tableData: {
            type: Array,
            default() {
                return [];
            },
            required: true,
        },
        childrenColumnName: {
            type: String,
            default: 'children'
        },
        // 多选
        rowSelection: {
            default: undefined,
        },
        // 是否显示管理图标
        settingStaus: {
            type: Boolean,
            default: false
        },
        // 是否显示分页改变
        showSizeChanger: {
            type: Boolean,
            default: false
        },
        // 分页总数
        total: {
            type: Number,
            default: 0
        },
        // 页码范围
        pageSizeOptions: {
            type: Array,
            default: [100, 150, 200, 300, 500]
        },
        indexKey: {
            typr: Number,
            default: 0
        }
    },
    data() {
        return {
            visible: false,
            confirmLoading: false,
            titleList: [],
            columnsList: []
        };
    },
    watch: {
        titleList: {
            deep: true,
            handler(val) {
                this.titleList = val
            }
        },
        columnsList: {
            deep: true,
            handler(val) {
                this.columnsList = val
            },
            immediate: true
        },
        columns: {
            deep: true,
            handler(val) {
                console.log(val, 'weqweqwe')
                const data = JSON.parse(JSON.stringify(val))
                this.columnsList = []
                this.titleList = []
                data.map((res) => {
                    if (res.status) {
                        console.log(res, 'res')
                        this.columnsList.push(res)
                    }
                    if (res.key !== "operate") {
                        this.titleList.push(res)
                    }
                })
            },
            immediate: true
        }
    },
    mounted() {

    },
    methods: {
        //页码改变
        sizeChange(event) {
            const obj = {
                page: event
            }
            console.log(event)
            this.$emit('childMessage', obj)
        },
        onShowSizeChange(event) {
            console.log(event)
            const obj = {
                pageSize: ''
            }
            // this.$emit('childMessage', obj)
        },
        // 其他改变
        pageChange(page, filters, sorter) {
            const obj = {
                filters: filters,
                sorter: sorter
            }
            this.$emit('childMessage', obj)
            console.log(page);
            console.log(filters);
            console.log(sorter);
        },
        // 选中要显示的表头
        onChange(event, info) {
            console.log(event)
            console.log(info)
            this.titleList.map((res) => {
                if (res.key == info.key) {
                    this.$set(res, 'status', !res.status)
                }
            })
        },
        // 关闭弹框
        handleCancel() {
            this.visible = false
        },
        //打开弹框
        changeTitle() {
            this.visible = true
        },
        //弹框确定
        handleOk() {
            this.$emit("titleCahnge", this.titleList)
            this.visible = false
        }
    }
};
</script>
<style scoped lang="less">
.icon_box {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 5px;
}

::v-deep .ant-checkbox-wrapper {
    display: flex;
    align-items: center;
}

.page_sty {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 20px;
}
</style>